<template>
  <div id="shoppingCart">
    <div class="header">
        <div class="icon-left" @click="goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
        <div class="headTab">
          <div @click='tabChange(1)'   class="tabItem" :class="tabIndex==1?'activeTab':''">购物车</div>
          <span class="split">|</span>
          <div @click='tabChange(2)'  class="tabItem" :class="tabIndex==2?'activeTab':''">我的</div>
        </div>
        <div style="width: 40px;"></div>
    </div>
    <div class="header-null"></div>
    <div class="contaniner" style="background-color: #fff;">
    	<div class="shopCart" v-if="tabIndex==1">
    		  <div class="shopping-list" v-if="list.length != 0" v-for="(i,index) in list" :key='index'>
            <div class="title">
              <img src="../../static/img/icon/my_icon/merchant@3x.png"/>{{i.createName}}<img src="../../static/img/icon/my_icon/arrow@3x.png"/>
		       </div>
           <div class="shopping-list-item mui-table-view-cell" v-for="(item,index) in i.shoppingList" v-if="!item.dele" :key='index'>
            <div class="mui-slider-handle">
              <div class="shopping-list-item-content">
                <div class="shopping-list-item-check">
                  <img src="../../static/img/icon/release_icon/weixuanzhong@2x.png" v-if="!item.check" @click="checkItem(item,index)" />
                  <img v-else src="../../static/img/icon/release_icon/nextstep@2x.png"  @click="checkItem(item,index)" />  
                </div>
                <div>
                  <div style="flex: 1;">
                     <img src='https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg' />
                <!--      <img :src="item.titleUrl.split(',').length?item.titleUrl.split(',')[0]:'https://wx2.sinaimg.cn/mw690/005zpxwhly1fyy2nw2yzcj302v02vt8l.jpg'"  /> -->
							</div>
                    <div>
                      <div class="shopping-list-item-content-title">
                        {{item.commodityName}}
                      </div>
                      <div class="shopping-list-content-type">
                        {{item.sortName}}
                      </div>
                      <div class="shopping-list-content-bottom">
                        <div class="shopping-list-content-num-left">
                        ￥{{item.sortPrice}}
                        </div>
                        <div class="shopping-list-content-num-right">
                          <div class="shopping-list-content-num-reduce">
                            <div @click.stop="reduce(item)">-</div>
                          </div>
                          <div class="shopping-list-content-number">
                            {{item.buyCount}}
                          </div>
                          <div class="shopping-list-content-num-plus">
                            <div @click.stop="plus(item)">+</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="mui-slider-right mui-disabled" ref="slider"  @click="deleted(index)">
                <a class="mui-btn mui-btn-red">删除</a>
              </div>
            </div>
          </div>



   <!--        <div class="shopping-list" v-if="list.length != 0" v-for="(i,index) in list">
			<div class="title">
				<img src="../../static/img/icon/my_icon/merchant@3x.png"/>
				  {{i.createName}}
				<img src="../../static/img/icon/my_icon/arrow@3x.png"/>
			</div>
			<div class="shopping-list-item mui-table-view-cell" v-for="(item,index) in i.shoppingList" v-if="!item.dele">
				<div class="mui-slider-handle">
					<div class="shopping-list-item-content">
						<div class="shopping-list-item-check">
							<img src="../../static/img/icon/release_icon/weixuanzhong@2x.png" v-if="!item.check" @click="checkItem(item,index)"/>
							<img v-else src="../../static/img/icon/release_icon/nextstep@2x.png"  @click="checkItem(item,index)"/>
						</div>
						<div>
							<div style="flex: 1;">
								<img :src="item.titleUrl.split(',')[0]"/>
							</div>
							<div>
								<div class="shopping-list-item-content-title">
									{{item.commodityName}}
								</div>
								<div class="shopping-list-content-type">
									{{item.sortName}}
								</div>
								<div class="shopping-list-content-bottom">
									<div class="shopping-list-content-num-left">
										￥{{item.sortPrice}}
									</div>
									<div class="shopping-list-content-num-right">
										<div class="shopping-list-content-num-reduce" @click.stop="reduce(item)">
											-
										</div>
										<div class="shopping-list-content-number">
											{{item.buyCount}}
										</div>
										<div class="shopping-list-content-num-plus" @click.stop="plus(item)">
											+
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="mui-slider-right mui-disabled" ref="slider" @click="deleted(index)">
					<a class="mui-btn mui-btn-red">删除</a>
				</div>
				 
			</div>
		</div> -->
          <div class="shopping-null" v-if="0">
            <div>
              <img src="../../static/img/icon/find_icon/gouweche.png"/>
			</div>
              <div>
                啊噢~您的购物车还没有商品
              </div>
              <div>
                可以逛逛有哪些想买的
              </div>
              <div @click="goIndex">
                去购物
              </div>
            </div>
            <div class="shopping-fixed" v-if="">
              <div class="shopping-fixed-check">
                <img src="../../static/img/icon/release_icon/weixuanzhong@2x.png" v-if="!check"  @click="checkAll"/>
                <img v-else src="../../static/img/icon/release_icon/nextstep@2x.png"  @click="checkAll"/>
			                	全选
			           </div>
                <div>
                  
                  <div>合计：<span class="total">￥{{total}}</span></div>
              <!--     	<div>不含运费</div> -->
                </div>
                <div class="shopping-fixed-btn" @click="submit">
                  结算({{checkTrue.length}})
                </div>
              </div>
    	</div>
    	<div class="my" v-else>
    		<div class="top">
    			<div class="avatar">
    				<img src="../../static/img/icon/home_icon/xilvfriends@2x.png" alt="">
    			</div>
    			<div class="info">
    				<div class="username">四喜丸子</div>
    				<div class="level">
    					<span>会员等级</span>
    					<i style="font-size: 24px;color:#FACA4D;" class="iconfont icon-dengji"></i>
    				</div>
    			</div>
 
    		</div>
    		<div class="mid">
    			   <div  class="itemBox" v-for="(item,index) in tabs" :key='index'>
    			   	<div class="item" @click="go('orderList')">
    				 	<div class="pic">
    				 		<i  :style="item.size"  class="iconfont" :class='item.font'></i>
    				 	</div>
    				 	<div class="name">{{item.text}}</div>
    				    </div> 
    			   </div>
    				
    		</div>
    		<div class="bottom">
    			 <div @click="go('address')" class="order-row" >
                       <div>收货地址</div>
                       <div>
                            <img src="../../static/img/icon/my_icon/arrow@2x.png"/>
                        </div>
                </div>
    		  <!--   	<div class="order-row" >
                       <div>优惠券</div>
                       <div>
                            <img src="../../static/img/icon/my_icon/arrow@2x.png"/>
                        </div>
                </div> -->
               
    		</div><!-- bootm结束 -->
    	</div><!-- 我的结束 -->

    </div>
    
 </div>
</template>
<script>
import { getData } from '../service/getData';
import { Tabs, TabPane } from 'iview';
export default {
  data() {
    return {
      num: 1,
      check: false,
      tabIndex:1,
      list: [],
      updataList: [],
      checkTrue: [{}, {}],
      tabs:[{
      	id:1,
      	font:'icon-gerenzhongxinwodedingdan',
      	text:'我的订单',
      	size:{
      		fontSize:'28px'
      	}
      },{
      	id:2,
      	font:'icon-gerenzhongxindingdandaifukuan',
      	text:'待付款',
      	size:{
      		fontSize:'28px'
      	}
      },{
      	id:3,
      	font:'icon-daifahuo',
      	text:'待发货',
      	size:{
      		fontSize:'28px'
      	}
      },{
      	id:4,
      	font:'icon-daishouhuo',
      	text:'待收货',
      	size:{
      		fontSize:'28px'
      	}
      },{
      	id:5,
      	font:'icon-yishouhuo',
      	text:'已完成',
      	size:{
      		fontSize:'28px'
      	}
      },]
    }
  },
  components: { Tabs, TabPane },
  methods: {
     
  	tabChange(e){
             this.tabIndex=e;
  	},
  	go(name){
  		this.route(name)
  	},
    reduce(item) { //数值减
      if (item.buyCount < 2) {
        item.buyCount = 1
      } else {
        item.buyCount--;
      }

    },
    goIndex() { //返回首页
      getData('/shoppingtrolley/refreshShoppingTrolleyApi', { //保存记录
        userId: sessionStorage.userId,
        shoppingList: JSON.stringify(this.updataList)
      }).then(d => {

      })
      sessionStorage.index = 2
      this.route('index')
    },
    goBack() { //返回
      getData('/shoppingtrolley/refreshShoppingTrolleyApi', { //保存记录
        userId: sessionStorage.userId,
        shoppingList: JSON.stringify(this.updataList)
      }).then(d => {

      })
      if (sessionStorage.state == 1) { //判断是否是安卓
        window.android.colseActivity()
        sessionStorage.state = 0
      } else {
        this.$router.goBack()
      }
    },
    plus(item) { //数值加				
      item.buyCount++;
      
    },
    checkItem(item, index) { //每个列表的状态
      item.check = !item.check
      if (item.check) {
        this.checkTrue.push(item)
      } else {
        for (var i = 0; i < this.checkTrue.length; i++) {

          if (item.ShoppingTrolleyID == this.checkTrue[i].ShoppingTrolleyID) {
            this.checkTrue.splice(i, 1)
          }
        }
      }
    },
    deleted(index) { //删除商品
      var _this = this
      mui.confirm('确定删除该商品', '', ['确定', '取消'], function(e) {
        if (e.index == 0) {
          _this.list[index].dele = true
          setTimeout(function() {
            _this.list.splice(index, 1)
          })
        }
      }, 'div')
    },
    checkAll() { //选择全部
      this.check = !this.check
      if (this.check) {
        this.checkTrue = []
        this.list.forEach(x => {
          x.shoppingList.map(i => {
            i.check = true
            this.checkTrue.push(i)
          })
        })
      } else {
        this.checkTrue = []
        this.list.forEach(x => {
          x.shoppingList.map(i => {
            i.check = false
          })
        })
      }
    },
    init() { //默认加载

       this.$store.state.isLoading = true
      getData('/shoppingtrolley/getShoppingByUserIdApi', {
        userId: sessionStorage.userId,
      }).then(d => {

         			  d.groupByList.map(x => {
         					x.dele = false
        				})
        this.$store.state.isLoading = false
        if (d.groupByList) {
          this.list = d.groupByList
          let _this = this
          this.list.map(x => {
            x.shoppingList.map(i => {
              _this.updataList.push(i);
                this.checkAll();
            })
          })
        }
      }).catch(err => {
        this.$store.state.isLoading = false
        console.log(err)
      })

    },
    refresh(){
     
    },
    submit() { //提交
    
     getData('/shoppingtrolley/refreshShoppingTrolleyApi', {
        userId: sessionStorage.userId,
        shoppingList: JSON.stringify(this.updataList)
      }).then(d => {
             
      })
      if (this.checkTrue.length == 0) {
        alert('请选择商品')
   
      } else {
        var id = ''
        this.checkTrue.map(x => {
          id += x.ShoppingTrolleyID + ','
        })
        localStorage.shoppingIds = id
        getData('/shoppingtrolley/settleAccountsApi', {
          userId: sessionStorage.userId,
          shoppingIds: id
        }).then(d => {
          this.$store.state.isLoading = false
          if (d.code == 1) {
            this.route('order')
          } else {
            alert(d.msg)
          }
        }).catch(err => {
          this.$store.state.isLoading = false
          console.log(err)
        })
      }
    }
  },
  computed: {
    total() {
      var sum = 0;
      for (var i = 0; i < this.checkTrue.length; i++) {
        sum += parseInt(this.checkTrue[i].buyCount * this.checkTrue[i].sortPrice);
      }
      if(sum){
        return sum;
      }else{
        return  0;
      }
       
    }
  },
  watch: {
    checkTrue() { //全选的状态
      if (this.checkTrue.length === this.updataList.length) {
        this.check = true
      } else {
        this.check = false
      }
    }
  },
  mounted() {
    $('#app').scrollTop(0),
      this.init()
  }
}

</script>
<style scoped lang="less">
 
.my{
	height: 100%;
	background-color: #eee;
	.top{
		margin-top:7px;
		background: #fff;
        display: flex;
       .avatar{
		border-radius: 50%;
		width: 65px;
		height: 65px;
		margin:10px 20px;
		img{
			width: 100%;
		}

	 }
	.info{ 
		font-size:18px;
		font-weight: bold; 
		padding-top:15px;
		.username{
			font-size:16px;
			line-height:27px;
			 
		}
		.level{
			font-size:15px;
			font-weight: normal;
			line-height:22px;
			color: #959595;
		}
	}
	
  }
  .mid{
  	display: flex;
  	justify-content: middle;
  	background-color: #fff;
  	margin-top:7px;
  	padding:15px 0;
  	.itemBox{
  		box-sizing:border-box;
  		 
  		width: 20%;
  		.item{
  		 
  			text-align: center;
  		}
  		.item:hover{
  			color:#E50001;
  		}
  	}
  }
  .bottom{
  	margin-top: 7px;
  }

}
.order-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  border-bottom: 1px solid #eee;
  background: #fff;
  padding:15px;

  div:nth-child(2) {
    display: flex;
    align-items: center;

    img {
      margin-left: 10px;
      width: 10px;
      height: 15px;
    }

    .check {
      width: 15px;
      height: 15px;
    }

    span:nth-child(3) {
      color: red;
      display: flex;
      align-items: center;
      font-weight: bold;
      /*font-size: 15px;*/
    }
  }
}
.tabItem,
.split {
  color: #A0A0A0;
}
.headTab{
	display: flex;
}
.headTab div{
	 
	width: 60px;
}
.headTab div:nth-child(1){
	text-align:right;
	padding-right: 10px;
}
.headTab div:nth-child(2){
	text-align:left;
}
.activeTab {
  color: #CCEC62 !important;
}

.total {
  padding: 0 20px;
  font-size: 16px;
  font-weight: bold;
  line-height: 60px;
}

#shoppingCart {
  height: 100%;
}

/*隐藏滚动条*/
#shoppingCart::-webkit-scrollbar {
  display: none
}

.shopping-list {
  background: #fff;
  margin-bottom: 80px;
  .title {
    
    border-bottom: 1px solid #eee;
    display: flex;
    height:28px;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
      margin-right: 20px;
      margin-left:10px;
      
     &:last-child {
        width: 8px;
        height: 12px;
        margin-left: 20px;
       
      }
    }
  }

  .shopping-list-item {

    .shopping-list-item-content {
      flex: 5;
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 90px;
        height: 85px;
        margin-right: 10px;
      }

      .shopping-list-item-check {
        flex: 1;
        text-align: center;

        img {
          width: 20px;
          height: 20px;
        }
      }

      div {
        font-size: 10px;
        position: relative;
        display: flex;
        flex: 10;

        div {
          display: flex;
          flex-direction: column;

          .shopping-list-item-content-title {
            display: -webkit-box;
            word-break: break-all;
            text-overflow: ellipsis;
            font-size: 32rpx;
            overflow: hidden;
            margin-bottom: 5px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          .shopping-list-content-type {
            color: #7B7B7B;
          }

          .shopping-list-content-bottom {
            /*position: absolute;
							bottom: 0;*/
            display: flex;
            width: 100%;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            .shopping-list-content-num-left {
              color: #c9eb59;
              font-size: 13px;
            }

            .shopping-list-content-num-right {
              display: flex;
              flex-direction: row;
              text-align: center;

              .shopping-list-content-num-reduce {
                padding: 4px 2px;

                div {
                  margin: 0 auto;
                  font-size: 15px;
                  color: #fff;
                  background: #eee;
                  border-radius: 50%;
                  width: 25px;
                  height: 25px;
                  line-height: 23px;
                }

              }

              .shopping-list-content-number {
                background: #eee;

                margin-right: 5px;
                line-height: 35px;
                text-align: center;

              }

              .shopping-list-content-num-plus {


                padding: 4px 0;
                color: #fff;

                div {
                  border-radius: 50%;
                  width: 25px;
                  height: 25px;
                  line-height: 23px;
                  background-color: #BCE211;

                }

              }
            }
          }

        }
      }
    }
  }
}

.shopping-null {
  display: flex;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  align-items: center;
  font-size: 14px;

  div {
    margin-bottom: 5px;
  }

  div:nth-child(2) {
    color: #7B7B7B;
  }

  img {
    width: 40%;
    height: 40%;
  }

  div:last-child {
    padding: 2px 15px;
    background: #bae416;
    border-radius: 5px;
    color: #fff;
  }
}

.shopping-fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  font-size: 12px;
  background: #fff;

  .shopping-fixed-check {
    flex: 2;
    display: flex;
    align-items: center;

    img {
      width: 20px;
      height: 20px;
      margin: 0 10px;
    }
  }

  div:nth-child(2) {
    flex: 2;
    text-align: right;
    padding: 0 10px;

    span {
      color: red;
      font-weight: bold;
    }

    div:last-child {
      font-size: 10px;
      color: #e5e5e5;
    }
  }

  .shopping-fixed-btn {
    background: #BCE211;
    padding: 10px 30px;
    color: #fff;
  }
}

</style>
